<script lang="ts" setup>
import { vInfiniteScroll, vScroll } from '@vueuse/components'
import type { UseScrollReturn } from '@vueuse/core'
import {
  listMeiYeOrder,
  payMeiYeOrder,
  userDeleteMeiYeOrder
} from '@/api/meiye.js'
import {
  myUserApi
} from '@/api/system.js'
import { onMounted, reactive, ref } from 'vue'
import { store } from '@/stores/allStores'
import { pageList, showModal, } from '@/util/bussinessTool';
import { isEmpty } from '@/util/localTool'
const active = ref(0)
const orderPage = reactive(new pageList(listMeiYeOrder))
const navList = reactive([
  { title: '全部', name: '' },
  { title: '进行中', name: 'wait_worker_accept,wait_out,wait_reach,wait_start,service' },
  { title: '待评价', name: 'wait_user_comment' },
  { title: '已完成', name: 'complete' },
  { title: '已取消', name: 'user_cancel,overdue' }
])
const dataList = ref()
function onChange() {
  loadData()
}
onMounted(() => {
  loadData()
})

function loadData(value = 'refresh') {
  if (value === 'refresh') {
    orderPage.resetPage()
    orderPage.loadState = 'loading'
    dataList.value = []
  }
  let params = {
    statusEnum: active.value,
    descs: 'id',
  }
  orderPage.getData(params).then((res: any) => {
    let records = res.data.records
    if (isEmpty(records) && value === 'refresh') {
      orderPage.loadState = 'noData'
      return
    }
    if (value === 'refresh') {
      dataList.value = records
    } else {
      dataList.value = dataList.value.concat(records)
    }
    orderPage.loadState = 'done'
    orderPage.pageData.current = records.length === 0 ? orderPage.pageData.current : (res.data.current + 1)
  }).catch(() => {
    orderPage.loadState = 'erro'
  })
}
function onLoadMore() {
  console.info('more')
  loadData('more')
}
let loading = ref(false)
let cantRefresh = ref(true)
function onRefresh() {
  loading.value = false
  loadData()
}
function onScroll(state: UseScrollReturn) {
  if (state.y.value < 10) {
    cantRefresh.value = false
  } else {
    cantRefresh.value = true
  }
  console.info(state.y.value)
  // {x, y, isScrolling, arrivedState, directions}
}
</script>
<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh" :disabled="cantRefresh">
    <van-tabs class="tab" v-model:active="active" @change="onChange" :title-active-color="store.common.themeColorValue"
      :color="store.common.themeColorValue">
      <van-tab v-for="item in navList" :name="item.name" :title="item.title"></van-tab>
    </van-tabs>
    <pageLoading v-infinite-scroll="onLoadMore" v-scroll="[onScroll, { 'throttle': 10 }]"
      :load-state="orderPage.loadState" class="pageLoading">
      <template #default>
        <div id="pageList">
          <listCard v-for="(item, index) in dataList" :key="index" :data="item" @onPay="">
          </listCard>
          <div class="text-center	i-text-13 i-my-20 text-gray-300">没有更多数据了</div>
        </div>
      </template>
    </pageLoading>
  </van-pull-refresh>
</template>
<style scoped>
::-webkit-scrollbar {
  display: none;
}

.tab {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
}

.pageLoading {
  height: calc(100vh - 94px);
}
</style>
